<template>
  <section>
    <div class="error-wrapper">
      <p class="font">404</p>
      <p class="mar-b-20">你的页面在走丢了~</p>
      <p class="mar-b-25"><span style="font-size: 26px;">{{ time }}</span> 秒后将自动返回主页</p>
      <router-link to="/home">
        <el-button type="primary"
                   round>返回主页</el-button>
      </router-link>
    </div>
  </section>
</template>
<script lang="ts">
import { Component, Provide, Vue } from "vue-property-decorator";
@Component
export default class NotFound extends Vue {
  private time: number = 5;
  created() {
    let timer = setInterval(() => {
      this.time--;
      if (this.time === 1) {
        this.$router.push("/home");
        clearInterval(timer);
      }
    }, 1000);
  }
}
</script>
</script>
<style lang="less" scoped>
.error-wrapper {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding-top: 15%;
  padding-left: 10%;
  text-align: left;
  background: url("../../assets/images/common/404.jpg") no-repeat;
  background-size: cover;
  font-size: 20px;
  color: #fff;
  .font {
    font-size: 180px;
  }
  p {
    color: #fff;
  }
}
</style>
